<template>
  <div>
    <el-aside>
      <div
        v-for="item in dragItems"
        :key="item.id"
        class="draggable-item"
        draggable="true"
        @dragstart="(event) => onDragStart(item, event)"
      >
        {{ item.name }}
      </div>
    </el-aside>
    <el-main>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="Name" width="200" />
        <el-table-column label="Droppable Column" width="400">
          <template #default="{ row }">
            <div
              class="droppable-cell"
              :class="{ highlight: row.isDragOver }"
              @dragover.prevent="onDragOver"
              @dragenter="onDragEnter(row)"
              @dragleave="onDragLeave(row)"
              @drop="onDrop(row, $event)"
            >
              <div>
                <el-tag
                  v-for="(item, index) in row.droppedData"
                  :key="index"
                  closable
                  class="dropped-tag"
                  @close="removeItem(row, index)"
                >
                  {{ item.name }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import DeviceAPI from "@/api/device/index";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dragItems = ref<DragItem[]>([]);

interface DragItem {
  id: number;
  name: string;
}

function getIdleDevces() {
  const _leftData: DragItem[] = [];
  DeviceAPI.getIdleDevce()
    .then((res) => {
      if (res.length > 0) {
        for (let i = 0; i < res.length; i++) {
          let typeName: string = "";
          if (res[i].deviceType == "gateway") {
            typeName = t("device.deviceType.gateway");
          } else if (res[i].deviceType == "node") {
            typeName = t("device.deviceType.node");
          } else {
            typeName = t("common.unknown");
          }
          _leftData.push({
            id: res[i].deviceId,
            name: res[i].deviceSnId + " " + (res[i].deviceRemark ?? typeName),
          });
        }
      }
      dragItems.value = _leftData;
    })
    .catch((err) => {
      console.error(err);
    });
}
const tableData = ref(
  Array.from({ length: 3 }, (_, index) => ({
    id: index + 1,
    name: `Row ${index + 1}`,
    droppedData: [] as { id: number; name: string }[],
    isDragOver: false,
  }))
);

const onDragStart = (item: { id: number; name: string }, event: DragEvent) => {
  event.dataTransfer?.setData("text/plain", JSON.stringify(item));
};

const onDragOver = (event: DragEvent) => {
  event.preventDefault();
};

const onDragEnter = (row: any) => {
  row.isDragOver = true;
};

const onDragLeave = (row: any) => {
  row.isDragOver = false;
};

const onDrop = (row: any, event: DragEvent) => {
  event.preventDefault();
  row.isDragOver = false;
  const data = event.dataTransfer?.getData("text/plain");
  if (data) {
    const droppedItem = JSON.parse(data);
    if (!row.droppedData.find((item: any) => item.id === droppedItem.id)) {
      row.droppedData.push(droppedItem);
    }
  }
};

const removeItem = (row: any, index: number) => {
  row.droppedData.splice(index, 1);
};

onMounted(() => {
  getIdleDevces();
});
</script>
<style scoped>
.draggable-item {
  padding: 10px;
  margin: 10px 0;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  cursor: grab;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.draggable-item:hover {
  background-color: #e6f7ff;
}

.droppable-cell {
  padding: 10px;
  border: 1px dashed #ccc;
  text-align: center;
  min-height: 50px;
  background-color: #fafafa;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

.droppable-cell.highlight {
  background-color: #e6f7ff;
  border-color: #40a9ff;
}

.dropped-tag {
  margin: 5px 5px 0 0;
}
</style>
